<template>
  <div class="loginBlock">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      label-position="top"
      class="ruleForm">
      <h3 class="formTitle">登录</h3>
      <p>LOGIN</p>
      <el-form-item
        prop="email"
        label="邮箱">
        <el-input
          v-model="ruleForm.email"
          placeholder="EMAIL"/>
      </el-form-item>
      <el-form-item
        prop="pwd"
        label="密码"
        type="password">
        <el-input
          v-model="ruleForm.pwd"
          placeholder="PASSWORD"/>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="ruleForm.checkbox">记住我</el-checkbox>
        <a 
          href="/registry" 
          class="toRegistry">还没有账号？创建新账号</a>
      </el-form-item>
      <el-form-item>
        <el-button
          class="submitBtn"
          type="primary"
          @click="onSubmit('ruleForm')">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    layout:'blank',
    data(){
      return {
        ruleForm:{
          email:'',
          name:'',
          pwd:'',
          checkbox:false
        },
        rules:{
          email:[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }],
          pwd:[{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, message: '密码长度最少6个字符', trigger: 'blur' }]
        }
      }
    },
    methods:{
      onSubmit(FN){
        this.$refs[FN].validate((valid)=>{
          if(valid) console.log('submit!')
          else {
            console.log('error')
            return false
          }
        })
      }
    }
  }
</script>

<style>
.loginBlock{
  display: flex;
  justify-content: center;
  align-items: center;
  height:100vh
}
.formTitle{
  text-align: center;
  color: #409EFF;
  font-size: 24px;
  font-weight: normal;
}
.formTitle~p{
  color: #409EFF;
  text-align: center;
  letter-spacing: 2px;
  font-weight:bold;
}
.ruleForm{
  width: 400px;
  padding: 20px 20px 10px;
  background-color: #f4f7f8;
  border-radius: 8px;
}
.submitBtn{
  width:100%
}
.el-form-item__label{
  padding: 0 !important;
}
.toRegistry{
  color: #409EFF;
  float:right;
}
</style>